<template>
<view class="search">
  <icon v-show="flag" type="search" size="20"></icon>
  <input class="searchIpt" :style="style" @input="emitIpt" v-model="content" :search="300" :placeholder="placeholder" :class="flag?'paddingleft':''" ref="ipt">
</view>
</template>

<script>
export default {
  name: "search",
  props:{
    flag:{
      type: Boolean,
      default: false
    },
    placeholder:{
      type: String,
      default: '请输入内容'
    },
    debounceTime:{
      type: Number,
      default: 300
    },
    val:{
      type:String,
      default: ''
    },
    style:{
      type: Object,
      default: {}
    }
  },
  data(){
    return{
      content: '',
      timeOut:''
    }
  },
  watch:{
    val(n){
        console.log('==========================>',n)
        this.content = n
        this.$forceUpdate()
      },
  },
  methods:{
    emitIpt(){
      this.debounce(()=>{
        this.$emit('update:val',this.content)
        this.$emit('change')
      },this.debounceTime)
    },
    //防抖
    debounce(fn,time){
      this.timeOut && clearTimeout(this.timeOut)
      this.timeOut = setTimeout(()=>{
        this.timeOut = null
        fn()
      },time)
    },
  }
}
</script>

<style scoped lang="scss">
.search{
position: relative;
icon{
  position: absolute;
  margin: 20rpx 10rpx;
}
.searchIpt{
  border: rgba(203,203,203,.8) 1px solid;
  width: 100%;
  height: 80rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
}
.paddingleft{
  padding-left: 60rpx;
}
}
</style>
